﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div的自动滚动</title>
    <style type="text/css">
        #scrollMsg{width:500px;height:235px;background-color:#feeff7;overflow:scroll;overflow-x:hidden;text-overflow:ellipsis;word-break:break-all;}
        #scrollMsg span{margin:6px;display:block;}
        #scrollMsg span a{color:#f60;text-decoration:underline;margin:0 4px;}
        #scrollMsg span a:hover{color:#f20;}
        #scrollMsg span label{color:#c70060;margin:0 4px;}
    </style>
    <script type="text/javascript" language="JavaScript">
        function getEid(id){
            return document.getElementById(id);    //获取指定的div元素
        }
        function newNode(param){
            return document.createElement(param);  //创建元素
        }
        function newTextNode(param){
            return document.createTextNode(param); //创建元素内容
        }

        function scrollDiv(){
            let dest=getEid("scrollMsg");          //获取要显示滚动内容的div
            let newStr=newTextNode(new Date().toLocaleString()+":知识改变命运，科技催动发展！");//显示的滚动信息
            let span=newNode("span");             //创建span元素
            span.appendChild(newStr);             //在sapn中添加显示信息
            dest.appendChild(span);               //将span添加到div中
            scrollMsg.scrollTop+=10000;           //滚动
            setTimeout("scrollDiv()",2000);            //设置定时期定时滚动
        }
        window.onload=scrollDiv;
    </script>
</head>
<body>
<div id="scrollMsg"></div>
</body>
</html>